<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>注册页面</title>
  <style>
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 20px;
  transform: scale(1.2);
  display: flex;
  justify-content: center;
  align-items: center;
}

table {
  margin: 0 auto;
  background-color: #fff;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

label {
  display: block;
  margin-bottom: 10px;
  color: #333;
}

input[type="text"],
input[type="password"] {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-bottom: 20px;
}

input[type="submit"],
input[type="reset"] {
  background-color: #4CAF50;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

input[type="submit"]:hover,
input[type="reset"]:hover {
  background-color: #45a049;
}
  </style>
  <script>
    window.onload = function() {
      createCode();
      setInterval(changeBackgroundColor, 2000);
    }

    var code; // 在全局定义验证码
    var c;

    function createCode() {
      code = "";
      var codeLength = 4; // 验证码的长度
      var checkCode = document.getElementById("code");
      var random = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R',
        'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'); // 随机数
      for (var i = 0; i < codeLength; i++) { // 循环操作
        var index = Math.floor(Math.random() * 36); // 取得随机数的索引（0~35）
        code += random[index]; // 根据索引取得随机数加到code上
      }
      c = code;
      checkCode.value = code; // 把code值赋给验证码
    }

    // 校验验证码
    function validateLogin() {
      var sUserName = document.frmLogin.username.value;
      var sPassword = document.frmLogin.password.value;
      var inputCode = document.frmLogin.text_code.value;
      if ((sUserName.length < 2) || (sUserName.length > 8)) {
        alert("用户名格式输入错误，请重新输入!");
        return false;
      }

      if ((sPassword.length < 6) || (sPassword.length > 16)) {
        alert("密码格式错误，请重新输入!");
        return false;
      }
      if (c != inputCode) {
        alert("验证码输入错误，请重新输入!");
        return false;
      }
    }

    function changeBackgroundColor() {
      var colors = ['#B2DFDB', '#E1BEE7', '#DCEDC8', '#CFD8DC', '#FFF9C4', '#FFE0B2', '#F5F5F5', '#F3E5AB']; // 背景颜色数组
      var randomIndex = Math.floor(Math.random() * colors.length); // 随机选择一个颜色
      var body = document.getElementsByTagName('body')[0];
      body.style.backgroundColor = colors[randomIndex]; // 设置背景颜色
    }
  </script>
</head>
<body>
  <div>
    <table align="center">
      <form method="POST" action="http://localhost:5000/login" name="frmLogin">
        <tr>
          <td><label for="username">用户名：</label></td>
          <td><input type="text" name="username" id="username" placeholder="2~8位，大小写字母结合" size="20" maxlength="20" /></td>
        </tr>
        <tr>
          <td><label for="password">密码：</label></td>
          <td><input type="password"           name="password" id="password" placeholder="6~16位，纯数字" size="20" maxlength="20" /></td>
        </tr>
        <tr>
          <td><label for="text_code">验证码:</label></td>
          <td>
            <input type="text" size="" name="text_code" id="text_code" />
            <input type="button" id="code" onclick="createCode()" value="刷新验证码" />
          </td>
        </tr>
        <tr>
          <td colspan="2" align="center">
            <input type="checkbox" name="zlogin" value="1" />自动登录
          </td>
        </tr>
        <tr>
          <td colspan="2" align="center">
            <input type="submit" name="login" value="注册信息" onClick="return validateLogin()" />
            <input type="reset" name="rs" value="重置页面" />
          </td>
        </tr>
      </form>
    </table>
  </div>
</body>
</html>